<template>
  <view class="content">
    <view class="header-img">
      <u-image
        :src="require('@/static/images/building/' + building.img_src)"
        width="100%"
        mode="widthFix"
      ></u-image>
    </view>
    <view class="opera-info">
      <view class="opera-name"> {{ building.name }}</view>
      <view class="opera-address"
        >{{ building.address }} 电话：{{ building.phone }}</view
      >
    </view>
    <view class="movie-list">
      <view class="header">特色电影</view>
      <view v-for="item in movies" :key="item.id" class="movie-item">
        <u-image
          :src="require('@/static/images/movie/' + item.imgSrc)"
          width="210rpx"
          height="310rpx"
          border-radius="14rpx"
        ></u-image>
        <view class="detail">
          <view class="movie-name">{{ item.title }}</view>
          <view class="movie-price">￥{{ item.price }}起</view>
          <view class="share-time">
            <text>放映时间</text>
            <view>
              <view
                v-for="item in building.screen_share"
                :key="item"
                class="time-item"
              >
                {{ item }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { IBuild, IMovie } from '@/@types/common';
import { defineComponent, ref, watch } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const buildingData = require('@/mock/building/index.json');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const movieData = require('@/mock/movie/index.json');

export default defineComponent({
  onLoad(options) {
    this.buildingId = options?.id || '';
    buildingData.operas.forEach((item: any) => {
      if (item.id === this.buildingId) {
        this.building = item;
      }
    });
    movieData.movies.forEach((item: IMovie) => {
      if (this.building?.movies?.includes(item.id as string)) {
        this.movies.push(item);
      }
    });
    console.log(this.movies);
  },
  setup() {
    const buildingId = ref('');
    const building = ref<IBuild>();
    const movies = ref<IMovie[]>([]);

    return {
      buildingId,
      building,
      movies,
    };
  },
});
</script>

<style lang="scss" scoped>
.header-img {
  width: 100vw;
  height: 300rpx;
  overflow: hidden;
}

.opera-info {
  width: 100%;
  padding: 40rpx;
  word-break: break-all;

  .opera-name {
    font-size: 32rpx;
    font-weight: 700;
  }

  .opera-address {
    width: 100%;
    font-size: 28rpx;
    color: #666;
    margin-top: 24rpx;
    line-height: 1.25rem;
  }
}

.movie-list {
  width: 100%;
  height: calc(100vh - 102rpx - 300rpx - 226rpx + 40rpx);
  padding: 0rpx 40rpx 0rpx 40rpx;
  .header {
    font-size: 38rpx;
    font-weight: 700;
    margin-bottom: 40rpx;
  }

  .movie-item {
    width: 100%;
    display: flex;
    margin-bottom: 40rpx;

    .detail {
      width: calc(100% - 210rpx - 20rpx);
      margin-left: 20rpx;

      .movie-name {
        font-size: 32rpx;
        font-weight: 700;
      }

      .movie-price {
        font-size: 28rpx;
        color: #4074ff;
        margin: 10rpx 0rpx;
      }

      .share-time {
        margin: 10rpx 0rpx;

        view {
          display: flex;
          flex-wrap: wrap;

          .time-item {
            padding: 4rpx 7rpx;
            border: 1px solid rgba(0, 0, 255, 0.3);
            border-radius: 10rpx;
            margin-right: 16rpx;
            margin-bottom: 16rpx;
          }
        }
      }
    }
  }
}
</style>
